<template>
    <div class="custom-service-box">    
        <CustomServiceMain :dialogueName="dialogueName" @send="send" :msg="msg"/>

        <CustomServiceOnlineVue 
            :showOnLine="showOnLine" 
            :onLineName="onLineName" 
            @dialogueName="getDialogueName"/>

        <CustomServiceMenuVue @showIndex="getShowIndex"/>
    </div>
</template>
 
<script>
import CustomServiceMain from './custom-service-main.vue'
import CustomServiceOnlineVue from './custom-service-online.vue'
import CustomServiceMenuVue from './custom-service-menu.vue'

export default {
    name: 'custom-service',
    components: { 
        CustomServiceMain, 
        CustomServiceOnlineVue, 
        CustomServiceMenuVue 
    },
    data() {
        return {
            // 当前管理员id
            adminId: '',

            // socket
            socket: {},
            
            // 全部在线的人
            onLine: '',

            // 菜单下标
            showIndex: 1,

            // 聊天记录
            msg: [],

            // 聊天那个人的name
            dialogueName: '',
            
            // 发送的内容
            content: ''
        }
    },
    computed: {
        adminSet() {
            return this.onLine.adminSet
        },
        userSet() {
            return this.onLine.userSet
        },
        showOnLine() {
            if (this.showIndex == 1) {
                return this.adminSet
            } else if (this.showIndex == 2) {
                return this.userSet
            }
        },
        // 登录的用户名
        onLineName() {
            return 'a_' + this.adminId
        }
    },
    methods: {
        initSocket() {
            // 从localstorage获取管理员id
            this.adminId = JSON.parse(localStorage.getItem('admin')).adminId
            
            if ('WebSocket' in window) {
                this.socket = new WebSocket('ws://localhost:8080/socket/' + this.onLineName)
            } else {
                alert('当前浏览器不支持该功能')
            }

            this.socket.onopen = this.socketOnOpen
            this.socket.onclose = this.socketOnClose
            this.socket.onerror = this.socketOnError
            this.socket.onmessage = this.socketOnMessage
        },
        socketOnOpen() {
            console.log('建立连接')
        },
        socketOnClose() {
            this.socket.close() 
        },
        socketOnError(e) {
            console.log('连接出现异常', e)
        },
        socketOnMessage(o) {
            console.log(JSON.parse(o.data))

            const {msg, isSave} = JSON.parse(o.data)
            if (isSave) {
                this.msg.push(new dialogue('L', msg))
            } else {
                this.onLine = JSON.parse(msg)
            }
        }, 
        socketOnsend() {
            if (this.content !== '') {
                this.msg.push(new dialogue('R', this.content))

                console.log(this.msg)

                this.socket.send(JSON.stringify({
                    msg: this.content, 
                    toId: this.dialogueName
                }))
            }
        },
        getShowIndex(showIndex) {
            this.showIndex = showIndex
        },
        getDialogueName(name) {
            this.msg = []
            this.dialogueName = name
        },
        send(content, callback) {
            this.content = content
            this.socketOnsend()
            callback()
        }
    },
    mounted() {
        this.initSocket()
    },
    destroyed() {
        this.socket.onclose()
    }
}

class dialogue{
    constructor(type, content) {
        this.type = type
        this.content = content
    }
}
</script>
 
<style scoped>
.custom-service-box{
    /* 右边菜单的宽度  */
    --menu-width: 50px;
    --onLine-list-width: 200px;
    display: flex;
    flex-wrap: nowrap;
}
</style>